React Streaming: Progresyvus Serverio Pusės Atvaizdavimas Optimizuotai Vartotojo Patirčiai

Žiniatinklio kūrimo pasaulyje greitas ir reaguojantis vartotojo patirties užtikrinimas yra itin svarbus. Vartotojai tikisi, kad svetainės bus įkeltos greitai ir bus interaktyvios be delsimo. React, populiari JavaScript biblioteka, skirta vartotojo sąsajoms kurti, siūlo galingą techniką, vadinamą Streaming Serverio Pusės Atvaizdavimu (SSR), siekiant išspręsti šį iššūkį. Šis straipsnis gilinasi į React Streaming SSR koncepciją, tyrinėdamas jos privalumus, įgyvendinimą ir poveikį svetainės našumui bei vartotojo patirčiai.

Kas yra Serverio Pusės Atvaizdavimas (SSR)?

Tradiciškas kliento pusės atvaizdavimas (CSR) apima naršyklės atsisiuntimą HTML, JavaScript ir CSS failų, o tada atvaizdavimą turinio kliento pusėje. Nors tai lankstu, šis metodas gali sukelti vėluojantį pradinį atvaizdavimą, nes vartotojas turi laukti, kol bus atsisiųsti visi ištekliai ir kol bus vykdomas JavaScript, prieš pamatant bet kokį turinį. SSR, kita vertus, atvaizduoja React komponentus serveryje ir siunčia visiškai atvaizduotą HTML klientui. Tai lemia greitesnį pradinį įkrovimo laiką, nes naršyklė gauna visiškai suformuotą HTML, kuris gali būti rodomas iš karto.

Tradicinio SSR apribojimai

Nors tradicinis SSR siūlo didelį patobulinimą, palyginti su CSR, jis turi ir savo apribojimų. Tradiciniame SSR, visa programa turi būti atvaizduota serveryje, prieš siunčiant bet kokį HTML klientui. Tai gali būti kliūtis, ypač sudėtingoms programoms su keliais komponentais ir duomenų priklausomybėmis. Laikas iki pirmojo baito (TTFB) gali būti didelis, todėl vartotojas gali jausti lėtumą.

Pristatome React Streaming SSR: Progresyvus metodas

React Streaming SSR įveikia tradicinio SSR apribojimus, taikydamas progresyvų metodą. Užuot laukus, kol visa programa bus atvaizduota serveryje, Streaming SSR suskaido atvaizdavimo procesą į mažesnius gabalus ir perduoda šiuos gabalus klientui, kai jie tampa prieinami. Tai leidžia naršyklei pradėti rodyti turinį kur kas anksčiau, pagerinant suvokiamą našumą ir sumažinant TTFB. Pagalvokite apie tai kaip apie restoraną, kuris ruošia jūsų patiekalą etapais: užkandis patiekiamas pirmas, tada pagrindinis patiekalas ir galiausiai desertas, o ne laukiama, kol visas patiekalas bus paruoštas iš karto.

React Streaming SSR privalumai

React Streaming SSR siūlo daugybę privalumų svetainės našumui ir vartotojo patirčiai:

• Greitesnis pradinis įkrovimo laikas: Siunčiant HTML gabalus klientui, naršyklė gali pradėti rodyti turinį kur kas anksčiau, todėl padidėja suvokiamas įkrovimo laikas ir pagerėja vartotojų įsitraukimas.
• Pagerintas laikas iki pirmojo baito (TTFB): Streaming SSR sumažina TTFB siųsdamas pradinį HTML gabalą, kai tik jis paruoštas, užuot laukus, kol bus atvaizduota visa programa.
• Patobulinta vartotojo patirtis: Greitesnis pradinis įkrovimo laikas lemia geresnę vartotojo patirtį, nes vartotojai neprivalo laukti, kol pasirodys turinys.
• Geresnis SEO: Paieškos varikliai gali efektyviau nuskaityti ir indeksuoti turinį, nes HTML yra lengvai prieinamas serveryje.
• Progresyvus hidratavimas: Streaming SSR leidžia progresyviai hidratuoti, kai kliento pusės React kodas palaipsniui prideda įvykių klausytojus ir daro programą interaktyvią, kai siunčiami HTML gabalai.
• Pagerintas išteklių naudojimas: Suskaidydamas atvaizdavimo procesą į mažesnius gabalus, Streaming SSR gali pagerinti išteklių naudojimą serveryje.

Kaip veikia React Streaming SSR

React Streaming SSR naudoja ReactDOMServer.renderToPipeableStream() API, kad siųstų HTML gabalus klientui. Šis API grąžina skaitomą srautą, kuris gali būti prijungtas prie serverio atsakymo objekto. Štai supaprastintas pavyzdys, kaip tai veikia:

1. Serveris gauna užklausą puslapiui.
2. Serveris kviečia ReactDOMServer.renderToPipeableStream(), kad atvaizduotų React programą į srautą.
3. Srautas pradeda skleisti HTML gabalus, kai atvaizduojami React komponentai.
4. Serveris prijungia srautą prie atsakymo objekto, siųsdamas HTML gabalus klientui.
5. Naršyklė gauna HTML gabalus ir pradeda juos progresyviai rodyti.
6. Gavus visus HTML gabalus, naršyklė hidratuoja React programą, padarydama ją interaktyvią.

React Streaming SSR įgyvendinimas

Norėdami įgyvendinti React Streaming SSR, jums reikės Node.js serverio ir React programos. Štai nuoseklus vadovas:

1. Nustatykite Node.js serverį: Sukurkite Node.js serverį naudodami tokią sistemą kaip Express arba Koa.
2. Įdiekite React ir ReactDOMServer: Įdiekite react ir react-dom paketus.
3. Sukurkite React programą: Sukurkite React programą su komponentais, kuriuos norite atvaizduoti serveryje.
4. Naudokite ReactDOMServer.renderToPipeableStream(): Savo serverio kode naudokite ReactDOMServer.renderToPipeableStream() API, kad atvaizduotumėte React programą į srautą.
5. Prijunkite srautą prie atsakymo objekto: Prijunkite srautą prie serverio atsakymo objekto, kad išsiųstumėte HTML gabalus klientui.
6. Tvarkykite klaidas: Įgyvendinkite klaidų tvarkymą, kad užfiksuotumėte visas klaidas, kurios gali atsirasti atvaizdavimo proceso metu.
7. Pridėkite scenarijaus žymą hidratavimui: Įtraukite scenarijaus žymą į HTML, kad hidratuotumėte React programą kliento pusėje.

Kodo pavyzdys (serverio pusė):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Your React component

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Client-side entry point
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Sorry, something went wrong
');
    }
  });

  setTimeout(abort, 10000); // Optional: Timeout to prevent indefinite hanging
});

app.use(express.static('public')); // Serve static assets

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

Kodo pavyzdys (kliento pusė - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

React App komponento pavyzdys (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data loaded successfully!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simulate a loading delay
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Welcome to Streaming SSR!
      
This is a demonstration of React Streaming SSR.
      Loading...
}>